import React, { Component } from "react";
import {
    Layout, Menu, Icon, Table, Divider, Button, Modal, Form, Input,
    TimePicker, Popconfirm, message, Alert, DatePicker, Tree, Steps,
    Select, Tabs, List, Card, Collapse, Dropdown, Drawer, Skeleton,
    Transfer, Tag, Col, Row, Avatar, AutoComplete, notification,
    Progress, Spin, Rate, Upload, Checkbox
} from "antd";
import moment from 'moment';
import {getSchoolLevelByEduIdApi} from "../js/edudailystatistics.js";
import '../css/bigscreen.css'

const FormItem = Form.Item;
const RangePicker = DatePicker.RangePicker;
const dateFormat = 'YYYY-MM-DD';

class planMake extends Component {
    constructor(props) {
        super(props);
        this.state = {
            alertVisible: false, //提示
            confirmLoading: false,
            msg: "", //提交失败时的提示语
            tableLoading: true,
            filteredInfo: null,
            sortedInfo: null,
            searchData: [],
            schoolLevel: [],
            countyList: [],
            searchChartLoading: true,
            chartSearchData: {},
            chartSearchAvg: "",
            startTime: "",
            endTime: "",
            isSearch: false,
            departmentId: sessionStorage.getItem("departmentId")
        };
    }
    componentDidMount() {
        this.refreshData();
    }

    refreshData() {
        this.setState({
            tableLoading: true
        });

        let departmentId = sessionStorage.getItem("departmentId")
 
        this.getSchoolLevelByEduId(departmentId, 1)
    }

    searchSubmit = (e) => {
        // var schoolLevel;
        // var departmentId;
        // e.preventDefault();
        // this.props.form.validateFields((err, values) => {
        //     console.log("values==============", values);

        //     if (values.deadline == undefined && values.schoolLevel == undefined) {
        //         message.error('请至少填写一项条件再进行搜索');
        //     } else {
        //         if (values.schoolLevel != undefined) {
        //             schoolLevel = values.schoolLevel
        //         }
        //         if(sessionStorage.getItem("departmentId") == 1){
        //             if(!isNaN(values.county)){
        //                 departmentId = values.county
        //             }
        //         }else{
        //             departmentId = sessionStorage.getItem("departmentId")
        //         }
                
        //         this.setState({
        //             tableLoading: true
        //         });    
        //     }
        // });
    }
    clearAll = () => {
        this.setState({
            filteredInfo: null,
            sortedInfo: null,
        });
    }
    searchReset = () => {
        this.props.form.resetFields();
    }
    handleSelectTime = (value, dateString) => {
        if (dateString[0] != '' && dateString[1] != '') {
            this.setState({
                startTime: dateString[0],
                endTime: dateString[1],
            })
        }
    }
    getSchoolLevelByEduId(id, allType){
        getSchoolLevelByEduIdApi(id, allType)
            .then((res) => {
                this.setState({
                    schoolLevel: res.data,
                });
            })
    }
    

    render() {
        let schoolLevelOptions = [];
        schoolLevelOptions.push(<Option value={null} key={-1}>全部</Option>)
        if (this.state.schoolLevel.length != 0) {
            schoolLevelOptions.push(this.state.schoolLevel.map((d, index) =>
                <Option value={d.schoolLevel} key={index}>{d.schoolLevel}</Option>
            ))
        }

        const { getFieldDecorator, getFieldValue } = this.props.form;
        const disabledDate = (current) => {
            return current && current <moment().subtract(1, "days"); //当天之前的不可选，不包括当天
        }
        let { sortedInfo, filteredInfo } = this.state;
        sortedInfo = sortedInfo || {};
        filteredInfo = filteredInfo || {};
        
        let labelCol = {
            sm: { span: 6 },
            xl: { span: 6 },
            xxl: { span: 5 },
        };

        let wrapperCol = {
            sm: { span: 18 },
            xl: { span: 18 },
            xxl: { span: 19 },
        };



        return (
            <div style={{ marginBottom: 16 }}>
                <Form style={{
                    padding: '12px',
                    backgroundColor: '#fafafa',
                    borderRadius: 8,
                    marginBottom: 16,
                }}
                    layout="inline"
                    onSubmit={this.searchSubmit}>
                    <Row>
                        <Col span={10}>
                            <FormItem
                                label="日期时段"
                                style={{ width: '100%' }}
                                labelCol={labelCol}
                                wrapperCol={wrapperCol}>
                                {getFieldDecorator("deadline", {
                                    rules: [{
                                        type: 'array',
                                        required: false,
                                    }],       
                                })(
                                    <RangePicker
                                        style={{ width: '100%' }}
                                        format={dateFormat}
                                        onChange={this.handleSelectTime}
                                        disabledDate={disabledDate} />
                                )}
                            </FormItem>
                        </Col>
                        
                        <Col span={10}>
                            <FormItem
                                label="学校类型"
                                style={{ width: '100%' }}
                                labelCol={labelCol}
                                wrapperCol={wrapperCol}>
                                {getFieldDecorator("schoolLevel", {
                                    rules: [{
                                        required: false,
                                    }]
                                })(
                                    <Select
                                        allowClear={true}
                                        style={{ width: '100%' }}
                                        placeholder="请选择学校类型">
                                        {schoolLevelOptions}
                                    </Select>
                                )}
                            </FormItem>
                        </Col>

                        <Col>
                            <FormItem
                                style={{ float: 'right' }}>
                                <Button type="primary" htmlType="submit">搜索</Button>
                                <Button style={{ marginLeft: 8 }} onClick={this.searchReset}>清空</Button>
                            </FormItem>
                        </Col>
                    </Row>
                </Form>

            </div>
        );
    }
}

const PlanMake = Form.create()(planMake);
export {PlanMake};